<style scoped>
  .content {
    margin-top: 20px;
    padding: 20px;
  }

  .survey-item {
    padding: 20px;
    /*margin-top: 20px;*/
    min-height: 200px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }

  .collect-num {
    margin-top: 20px;
    line-height: 50px;
  }

  .strong-font {
    font-weight: bold;
    color: black;
  }
</style>

<template>
  <div class="height: 100%;">

    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>工作准备</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="content">
      <el-row :gutter="20">
        <el-col :span="12" v-for="(item, index) in list" :key="index" class="survey-item">
          <div class="grid-content bg-purple">
            <el-col :span="6" style="text-align: center;">
              <el-avatar style="background: #99b2e4" :size="80"> {{ item.name | securityShow }}</el-avatar>

              <div class="collect-num">
                <span><i class="el-icon-location-outline"/></span><span>{{ item.currentNum }}</span>
                &nbsp;
                <span><i class="el-icon-s-flag"/></span><span>{{ item.collectNum }}</span>
              </div>
            </el-col>
            <el-col :span="18" style="font-size: 14px;">
              <div><span>名称:</span> <span class="strong-font"> {{ item.name | securityShow }}</span></div>
              <div><span>编号:</span> <span class="strong-font"> {{ item.code }}</span></div>
              <div><span>公司:</span> <span class="strong-font"> {{ item.companyName }}</span></div>
              <div><span>状态:</span> <span class="strong-font"> {{ item.state.desc }}</span></div>

              <div style="margin-top: 20px;">
                <el-button size="mini" @click="showShiftList(item)">查看可申请班次</el-button>
                <el-button size="mini" @click="toStart(item)">开始</el-button>
              </div>
            </el-col>
          </div>
        </el-col>
      </el-row>
    </div>

    <!--可申请班次-->
    <el-dialog title="可申请班次" :visible.sync="selectShiftDialog" width="60%"
               :close-on-click-modal="false" @click='closeDialog("shift")'>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="shiftDate" label="班次日期" width="180"/>
        <el-table-column prop="startTime" label="开始时间" width="180"/>
        <el-table-column prop="endTime" label="结束时间" width="180"/>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="applyShift(scope.$index, scope.row)">报名</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  import Pagination from "../../../components/Pagination";
  import {shiftList, surveyList, recordSave, canIStart} from "../../../api/baseMG";
  import {datePipe, getStore} from '../../../utils/util'

  export default {
    data() {
      return {
        list: [],
        selectShiftDialog: false,
        tableData: [],
        // 分页参数
        pageParams: {
          currentPage: 1,
          pageSize: 10,
          total: 10
        },
        searchParams: {
          page: 1,
          perPage: 10,
          filters: [
            {
              showAble: false,
              readonly: true,
              placeholder: "默认",
              fieldName: "companyId",
              compare: "=",
              fieldValue: getStore("userInfo").companyId
            },
            {
              showAble: true,
              readonly: true,
              placeholder: "请输入公司名称",
              fieldName: "companyName",
              compare: "=",
              fieldValue: getStore("userInfo").company
            },
            {
              showAble: true,
              readonly: false,
              fieldName: "state",
              compare: "in",
              fieldValue: '2,3'
            }
          ],
          isLock: ''
        }
      }
    },
    created() {
      this.getList(this.searchParams);
    },
    filters: {
      // 安全展示
      securityShow(text) {
        if (text.length > 4) {
          return text.substring(0, 2) + "****" + text.substring(text.length - 2, text.length);
        } else {
          return "****"
        }
      }
    },
    components: {
      Pagination
    },
    methods: {
      toStart(item) {
        canIStart(item.id).then(resp => {
          if (resp.success) {
            return this.$router.push({path: '/base/work/start', query: {id: item.id}});
          }
          this.$message({
            type: 'error',
            message: resp.msg
          });
        }).catch(resp => {
          this.$message({
            type: 'success',
            message: resp.msg
          });
        })
      },
      applyShift(index, row) {
        recordSave({
          shiftId: row.id,
          username: JSON.parse(localStorage.getItem("userInfo")).userName
        }).then(resp => {
          if (resp.success) {
            this.$message({
              type: 'success',
              message: resp.msg
            });
            this.selectShiftDialog = false;
          }
        })
      },
      closeDialog(c) {
        if (c === 'shift') {
          this.selectShiftDialog = false;
        }

      },
      showShiftList(item) {
        this.selectShiftDialog = true;
        this.getActiveShift(item.id);
      },
      getList(params) {
        surveyList(params).then(resp => {
          if (resp.success) {
            this.list = resp.data.list;
            this.pageParams.currentPage = resp.data.pageNum;
            this.pageParams.pageSize = resp.data.pageSize;
            this.pageParams.total = resp.data.total;
          }
        })
      },
      getActiveShift(id) {
        shiftList({
          page: 1,
          perPage: 10,
          filters: [
            {
              showAble: false,
              readonly: true,
              placeholder: "默认",
              fieldName: "companyId",
              compare: "=",
              fieldValue: JSON.parse(localStorage.getItem("userInfo")).companyId
            },
            {
              showAble: true,
              readonly: false,
              fieldName: "shiftDate",
              compare: ">=",
              fieldValue: datePipe(new Date(), "yyyy-MM-dd")
            }, {
              showAble: true,
              readonly: false,
              fieldName: "surveyId",
              compare: "=",
              fieldValue: id
            }
          ],
          isLock: ''
        }).then(resp => {
          this.tableData = resp.data.list;
        })
      }
    }
  }
</script>
